<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>内置指令</title>
  <style>
    [v-cloak] {
      display: none
    }
  </style>
</head>

<body>
  <!--
      指令是指带有v-前缀的特殊属性， 指令的预期值是单个JavaScript表达式（v-for是例外情况）


      常用内置指令
          v-text : 更新元素的 textContent
          v-html : 更新元素的 innerHTML
          v-if : 如果为true, 当前标签才会输出到页面
          v-else: 如果为false, 当前标签才会输出到页面
          v-show : 通过控制display样式来控制显示/隐藏
          v-for : 遍历数组/对象
          v-on : 绑定事件监听, 一般简写为@
          v-bind : 用于属性绑定，绑定解析表达式, 可以省略为 :
          v-model : 表单双向数据绑定
          ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
          v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
                    原理是vue解析模板之前会存在v-cloak的属性，在解析后，v-clock属性会被删掉

  -->

  <div id="example">
    <p v-cloak>{{content}}</p>
    <p v-text="content"></p>
    <p v-html="content"></p>
    <!-- ref为元素注意一个唯一标识符msg -->
    <p ref="msg">abcd</p>
    <button @click="hint">提示</button>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#example',
      data: {
        content: '<a href="http://www.baidu.com">百度一下</a>'
      },
      methods: {
        hint() {
          alert(this.$refs.msg.innerHTML)
        }
      }
    })
  </script>
</body>

</html>
